<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field.options.displayStyle"
  >
    <div class="scene-window-patient-widget" :style="getStyle('area')">
      <div class="window-area flex-box">
        <div class="flex-box-left flex-item" :style="getStyle('leftBoxHeight')">
          <template>
            <div class="location-1" :style="getStyle('room')">
              <ScrollX>{{ getRoomInfo }}</ScrollX>
            </div>
            <div class="titleNameStyle" :style="getStyle('number')">
              <ScrollX>{{
                  getRoomDoctorInfo("treatingPatient")[0]
                      ? getRoomDoctorInfo("treatingPatient")[0].patientName
                      : ""
                }}
              </ScrollX>
            </div>
            <div class="titleOrderNo">
              <ScrollX>
                {{
                  getRoomDoctorInfo("treatingPatient")[0]
                      ? getRoomDoctorInfo("treatingPatient")[0].orderNo
                      : ""
                }}
              </ScrollX
              >
            </div>
          </template>
        </div>

        <div class="flex-box-right-Box">
          <div class="flex-box-right-Box-header">
            <div class="flex-item-th">
              <div class="flex-item-left-wid">序号</div>
              <div class="flex-item-right-wid">姓名</div>
            </div>
            <div class="flex-item-th mar-left">
              <div class="flex-item-left-wid">序号</div>
              <div class="flex-item-right-wid">姓名</div>
            </div>
          </div>

          <div class="flex-item-tr">
            <vue-seamless-scroll
                class="scroll"
                :ref="`scroll`"
                :data="getRoomDoctorInfo('waitingPatientListAll')"
                :classOption="optionCallPatientList"
                :key="
                (getRoomDoctorInfo('waitingPatientList')[1].length > 6 &&
                  'key') ||
                (getRoomDoctorInfo('waitingPatientList')[1].length <= 6 &&
                  widgetKey)
              "
            >
              <div class="flex-item-tr-betwen">
                <div
                    v-for="(ListItem, index) in getRoomDoctorInfo(
                    'waitingPatientList'
                  )"

                >
                  <div
                      class="flex-item-tbody"
                      v-for="(item, index) in ListItem"
                      :style="getStyle('rightRowHeight')"
                  >
                    <!-- <div
                      :class="index + 1 === ListItem.length? 'flex-item-tbody-end':'flex-item-tbody' "
                      v-for="(item, index) in ListItem"
                    > -->
                    <div class="flex-item-left-wid">
                      {{ item?.orderNo }}
                    </div>
                    <div class="flex-item-right-wid">
                      <div class="item-inside">
                        {{ item?.patientName }}
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from "uuid";
import {NoticeBar, Swipe, SwipeItem} from "vant";
import emitter from "@/utils/designer/emitter";
import {pxToVw} from "@/utils/common";
import ScrollY from "@c/public/seamlessScroll/ScrollY.vue";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from "vue-seamless-scroll";
import {setWindowDeptInfo} from "@/store/modules/actions";

export default {
  name: "scene-window-patientList-1-2-6-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    vueSeamlessScroll,
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
    };
  },

  computed: {
    optionCallPatientList() {
      const {
        scrollNumber = 13,
        scrollStep = 1,
        scroll = true,
      } = this.optionsInfo;
      console.log("scrollNumber", scroll, scrollNumber);
      return {
        hoverStop: false,
        direction: 1, // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][scrollStep - 1], // 数值越大速度滚动越快
        limitMoveNum: scroll ? scrollNumber : 99999, // 开始无缝滚动的数据量 this.dataList.length
      };
    },
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.areaHeight));
            return Obj;
          case "room":
            Reflect.set(Obj, "fontSize", pxToVw(info.roomNameFontSize));
            return Obj;
          case "number":
            // Reflect.set(Obj, 'fontSize', pxToVw(info.roomNumberFontSize));
            return Obj;
          case "rightRowHeight":
            Reflect.set(Obj, 'height', pxToVw(info.layoutConfig.rightRowHeight))
            return Obj
          case "leftBoxHeight":
            Reflect.set(Obj, 'height', pxToVw(info.layoutConfig.leftBoxHeight))
            return Obj
        }
      };
    },

    // 获取科室信息
    getWindowDeptInfo() {
      let devType = this.devType;
      let roomDoctorInfo = this.$store.getters["getWindowDeptInfoInfo"];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    //获取医生-患者信息
    getRoomDoctorInfo() {
      return function (type) {
        let temp = Array();
        let devType = this.devType;
        let roomDoctorInfo = this.$store.getters["getRoomDoctorInfo"];
        let data;
        if (devType) {
          data = roomDoctorInfo.apiData || Array();
        } else {
          data = roomDoctorInfo.mockData || Array();
        }
        console.log("roomDoctorInfo", roomDoctorInfo);
        // 基于这个参数 -运行
        const targetNumb = 12;
        if (data?.length) {
          // 截取第一位医生
          let topPlace = data.slice(0, 1);
          if (type === 'waitingPatientListAll') {
            let waitingPatientList = topPlace[0]['waitingPatientList'] || [];
            console.log('topPlace[0][type]', topPlace[0][type], waitingPatientList)
            return waitingPatientList
          }
          // 获取首位医生的就诊和候诊的患者--数组
          if (type === "waitingPatientList") {
            let waitingPatientList = topPlace[0][type] || [];
            if (waitingPatientList.length < targetNumb) {
              let len = waitingPatientList.length
              for (let i = 0; i < (targetNumb - len); i++) {
                waitingPatientList.push({})
              }
            }
            if (waitingPatientList.length % 2 !== 0) {
              waitingPatientList.push({})
            }
            return [
              waitingPatientList.slice(
                  0,
                  Math.floor(waitingPatientList.length / 2)
              ),
              waitingPatientList.slice(
                  Math.floor(waitingPatientList.length / 2)
              ),
            ];
          } else {
            // 正在就诊数组
            return topPlace[0][type] || [];
          }
        } else {
          if (type === 'waitingPatientListAll') {
            let waitingPatientList = new Array(targetNumb).fill({});
            return waitingPatientList
          }
          if (type === "waitingPatientList") {
            let waitingPatientList = new Array(targetNumb).fill({});
            return [
              waitingPatientList.slice(
                  0,
                  Math.floor(waitingPatientList.length / 2)
              ),
              waitingPatientList.slice(
                  Math.floor(waitingPatientList.length / 2)
              ),
            ];
          }
          temp.push({});
          return temp;
        }
      };
    },

    getRoomInfo() {
      const self = this;
      let info = self.optionsInfo || Array();
      let deptInfo = this.getWindowDeptInfo;
      if (info["roomNameAuto"]) {
        if (!!info && !!info["roomNameKey"]) {
          return deptInfo[info["roomNameKey"]] || deptInfo["roomName"];
        } else {
          return deptInfo["roomName"];
        }
      } else {
        return info["roomName"];
      }
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDoctorInfo":
          console.log(`医生-患者-信息-${data}`);
          this.widgetKey = uuid();
          this.$store.dispatch(
              "setRoomDoctorInfo",
              this.$lodash.cloneDeep(data)
          );
          break;
        case "roomDeptInfo":
          this.widgetKey = uuid();
          console.log(`科室诊室信息-${data}`);
          this.$store.dispatch(
              "setWindowDeptInfo",
              this.$lodash.cloneDeep(data)
          );
          break;
      }
    },
    // 就诊患者数据拍平
    waitingPatientSummaryInfos(item) {
      console.log(item, "itemitem");
      return this.$lodash.flattenDeep(item);
    },
  },

  watch: {
    field: {
      handler: function (val) {
        console.log(val);
        // this.widgetKey = uuid();
        // let optionsInfo = val.options[val.options.config];
        // // if (!Reflect.has(optionsInfo, "deptName")) {
        // //   Reflect.set(optionsInfo, "deptName", "采血处");
        // // }
        // // if (!Reflect.has(optionsInfo, "viewMode")) {
        // //   Reflect.set(optionsInfo, "viewMode", 1);
        // // }
        // this.optionsInfo = { ...optionsInfo };
        let key = val.options.config;
        this.optionsInfo = val.options[key];
        // this.widgetKey = uuid();
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-window-patient-widget {
  color: #333;
  height: 830px;
  font-size: 40px;
  padding: 28px 30px;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  // background: #e5eaef;
  overflow: hidden;

  .window-area {
    height: 100%;
    // background: transparent;

    .flex-item {
      overflow: inherit;
      border: none;
    }

    .flex-box-left {
      margin-right: 14px;
      background: #0059b3;
      color: white;
      overflow: hidden;
      width: 730px;
      border-radius: 20px;
      flex-direction: column;
      // box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.15),
      // inset 15px 15px 10px rgba(255, 255, 255, 0.75),
      // -15px -15px 35px rgba(255, 255, 255, 0.55),
      // inset -1px -1px 10px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      // 视图一
      .location-1 {
        min-width: 100%;
        max-width: 730px;
        flex-basis: 100%;
        min-height: 298px;
        max-height: 298px;
        display: flex;
        font-size: 150px;
        align-items: center;
        justify-content: center;
        background: rgba(0, 89, 179, 1);

        .scrollText {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-self: center;
          align-items: center;
        }
      }

      .titleNameStyle {
        height: 203px;
        width: 660px;
        background: #ffffff;
        color: #0059b3;
        font-size: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
      }

      .titleOrderNo {
        height: 150px;
        max-width: 660px;
        font-size: 120px;
        color: white;
        margin-top: 44px;
        display: flex;
        align-items: center;
      }

      .number {
        width: 100%;
        height: calc(100% - 298px);
        background: #0059b3;
        font-size: 500px;
        font-weight: bolder;
        align-items: center;
        align-self: center;
        justify-content: center;
      }
    }

    .flex-box-right-Box {
      margin-left: 14px;
      // background: transparent;
      height: 773px;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
    }

    .flex-box-right-Box-header {
      display: flex;
      // justify-content: space-between;
    }

    .flex-item {
      // height: 773px;
      width: 551px;
      border-right: 7px solid #e5eaef;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
    }

    .flex-item-left-wid {
      width: 228px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
    }

    .flex-item-right-wid {
      width: 326px;
      max-width: 250px;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .item-inside{
        @include singleEllipsis(100%)
      }
    }

    .flex-item-th {
      width: 550px;
      height: 120px;
      display: flex;
      font-size: 50px;
      color: white;
      background: #0059b3;
      border-radius: 10px 10px 0 0;
    }

    .mar-left {
      margin-left: 5px;
    }

    .flex-item-tr {
      flex: 1;
      overflow: hidden;
      max-height: 653px;
    }

    .flex-item-tr-betwen {
      display: flex;
      justify-content: space-between;
    }

    .flex-item-tbody {
      // height: 103px;
      width: 550px;
      font-size: 50px;
      display: flex;
      border-bottom: 7px solid #e5eaef;
      background: white;
      font-weight: 600;
    }

    .flex-item-tbody-end {
      height: 103px;
      width: 550px;
      font-size: 50px;
      display: flex;
      background: white;
      font-weight: 600;
      border-bottom: 7px solid white;
    }
  }
}
</style>